<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 事件</title>
</head>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
 $(function(){
  //   $('.btn').click(function () {
  //    alert('我是点击事件测试');
  //  });
  //  $('.btn').mouseout(function () {
  //    alert('我是鼠标进入事件');
     
  //  });

  // //  $('.btn').off('click');//解除btn的全部事件  or  指点的事件

  //  $('.father').click(function(){
  //     alert('我是爸爸');
  //  });

  //   $('.son').click(function () {
  //    alert('我是儿子');
  //  });

  //  $('.son').triggerHandler('click');
  //  $('.son').trigger('click');

  // $('.btn').myClick(function(){
  //   alert('测试');
  // });

  //  $('.btn').on('myClick',function(){
  //   alert('测试111');
  //  })
  
  //  $('.btn').trigger('myClick');


  $('.btn').click(function(){
    $('ul').append(' <li>我是新添加的li</li>');
    
  });
  


 });
</script>
<body>
  <button class="btn">点击添加</button>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
  </ul>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
<style>
  .father{
    width: 500px;
    height: 500px;
    background-color: burlywood;
  }
  .son{
    width: 200px;
    height: 200px;
    background-color: rgb(104, 86, 202);
  }
</style>
</html>